<template>
  <div class="container">
    <!-- 按钮组 -->
    <div class="container-left">
      <div class="left-save">
        <van-button type="info" icon="down" block @click="onClickRight">保存图片到本地</van-button>
      </div>
      <div class="divider">
        <van-divider>配置项</van-divider>
      </div>
      <div class="left-bottom">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item title="图标组"/>
          <van-sidebar-item title="文字组"/>
          <van-sidebar-item title="背景组"/>
        </van-sidebar>
        <div class="left-bottom-content">
          <div v-if="activeKey === 0" class="content-1">
            <!--预设图标-->
            <template>
              <div class="divider">
                <van-divider content-position="left">预设图标</van-divider>
              </div>
              <van-button
                  class="van-ellipsis"
                  style="width: 100px"
                  :type="item.type"
                  :icon="item.icon"
                  v-for="(item,index) in iconBtnList"
                  :key="index"
                  @click="onIconBtnClick(item,index)"
              >
                {{ item.name }}
              </van-button>
            </template>

            <!--自定义图标-->
            <template>
              <div class="divider">
                <van-divider content-position="left">自定义图标</van-divider>
              </div>
              <van-uploader
                  v-model="fileListIcon"
                  multiple
                  :after-read="onAfterReadIcon"
                  :before-delete="onBeforeDeleteIcon"
              />
            </template>
          </div>
          <div v-if="activeKey === 1" class="content-2">
            <!--正标题-->
            <template>
              <!--标题1-->
              <div class="divider">
                <van-divider content-position="left">正标题</van-divider>
              </div>
              <div class="bigTitle">
                <van-field v-model="bigValue1" label="正标题1" placeholder="请输入第一行"/>
                <input type="color" v-model="bigValue1Color">
              </div>
              <van-slider
                  v-model="bigSliderValue1"
                  active-color="#1989FA"
                  :max="200"
                  style="padding: 5px 30px">
                <template #button>
                  <div class="custom-button">{{ bigSliderValue1 }}</div>
                </template>
              </van-slider>
              <van-button
                  plain
                  type="info"
                  block
                  size="small"
                  @click="onBigTitleAddSpace('bigValue1')">
                在前面添加空格
              </van-button>

              <!--标题2-->
              <div class="bigTitle">
                <van-field v-model="bigValue2" label="正标题2" placeholder="请输入第二行"/>
                <input type="color" v-model="bigValue2Color">
              </div>
              <van-slider
                  v-model="bigSliderValue2"
                  active-color="#1989FA"
                  :max="200"
                  style="padding: 5px 30px">
                <template #button>
                  <div class="custom-button">{{ bigSliderValue2 }}</div>
                </template>
              </van-slider>
              <van-button
                  plain
                  type="info"
                  block
                  size="small"
                  @click="onBigTitleAddSpace('bigValue2')">
                在前面添加空格
              </van-button>
            </template>

            <!--副标题-->
            <template>
              <div class="divider">
                <van-divider content-position="left">副标题</van-divider>
              </div>
              <van-field v-model="smallValue1" label="副标题1" placeholder="左上角副标题"/>
            </template>
          </div>
          <div v-if="activeKey === 2" class="content-3">

            <!--背景颜色预设-->
            <template>
              <div class="divider">
                <van-divider content-position="left">背景颜色预设</van-divider>
              </div>
              <van-button
                  style="width: 100px"
                  v-for="(item,index) in bgColorBtnList"
                  :key="index"
                  :color="item.bgColor"
                  @click="onBgColorBtnClick(item,index)"
              >
                <span :style="{color:item.color}">{{ item.name }}</span>
              </van-button>
            </template>

            <!--背景颜色自定义-->
            <template>
              <div class="divider">
                <van-divider content-position="left">背景颜色自定义</van-divider>
              </div>
              <input type="color" v-model="bgColor" style="width: 100%; height:50px;margin: 10px 0;">
            </template>

            <!--上传背景图片-->
            <template>
              <div class="divider">
                <van-divider content-position="left">上传背景图片</van-divider>
              </div>
              <van-uploader :after-read="onAfterReadBg">
                <van-button icon="plus" type="info">上传背景</van-button>
              </van-uploader>
            </template>

            <!--背景视觉冲击-->
            <template>
              <div class="divider">
                <van-divider content-position="left">背景视觉冲击</van-divider>
              </div>
              <div class="bgImageBtnList">
                <van-image
                    v-for="(item,index) in bgSpikeBtnList"
                    :key="index"
                    width="100"
                    height="100"
                    :src="item.url"
                    @click="onSpikeBtnClick(item,index)"
                >
                  <template v-slot:default>
                    {{ item.name }}
                  </template>
                </van-image>
              </div>
              <van-slider
                  v-model="bgSpineOpacity"
                  active-color="#1989FA"
                  :max="1"
                  :step="0.1"
                  style="padding: 5px 30px;margin-top: 30px">
                <template #button>
                  <div class="custom-button">{{ bgSpineOpacity }}</div>
                </template>
              </van-slider>
            </template>

            <!--预设背景图-->
            <template>
              <div class="divider">
                <van-divider content-position="left">预设背景图</van-divider>
              </div>
              <div class="bgImageBtnList">
                <van-image
                    v-for="(item,index) in bgImageBtnList"
                    :key="index"
                    width="100"
                    height="100"
                    :src="item.url"
                    @click="onImageBtnClick(item,index)"
                >
                  <template v-slot:default>
                    {{ item.name }}
                  </template>
                </van-image>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片预览 -->
    <div
        class="container-right"
        ref="imageDom"
        :style="bgComputed">
      <div
          class="container-spike"
          :style="[spikeComputed,styleVar]">
      </div>
      <!-- 图标 -->
      <div class="icon-list">
        <van-image
            v-for="(item,index) in iconImageList"
            :key="index"
            width="100"
            height="100"
            :src="item.url"
        />
      </div>
      <!-- 副标题1 -->
      <div class="small-title">
        <p class="small-title1">{{ smallValue1 }}</p>
      </div>
      <!-- 正标题 -->
      <div class="big-title" :style="[bigTitleStyle]">
        <p class="big-title1"
           :style="{
            color:bigValue1Color,
            fontSize:bigSliderValue1 + 'px'
           }">
          {{ bigValue1 }}
        </p>
        <p class="big-title2"
           :style="{
            color:bigValue2Color,
            fontSize:bigSliderValue2 + 'px'
          }">
          {{ bigValue2 }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas"

export default {
  name: 'App',
  data() {
    return {
      // 侧边栏选择索引
      activeKey: 0,

      // 大标题相关1
      bigValue1: "",
      bigValue1Color: "#4187F2",
      bigSliderValue1: 120,

      // 大标题相关2
      bigValue2: "",
      bigValue2Color: "#F3B049",
      bigSliderValue2: 120,


      // 副标题
      smallValue1: "",

      // 预设图标按钮列表
      iconBtnList: [
        {
          name: "HTML",
          url: require("./assets/icon/HTML.png"),
          type: "info",
          icon: "plus"
        },
        {
          name: "CSS",
          url: require("./assets/icon/CSS.png"),
          type: "info",
          icon: "plus"
        },
        {
          name: "JavaScript",
          url: require("./assets/icon/JavaScript.png"),
          type: "info",
          icon: "plus"
        },
        {
          name: "Vue",
          url: require("./assets/icon/Vue.png"),
          type: "info",
          icon: "plus"
        },
        {
          name: "React",
          url: require("./assets/icon/React.png"),
          type: "info",
          icon: "plus"
        },
        {
          name: "ECharts",
          url: require("./assets/icon/ECharts.png"),
          type: "info",
          icon: "plus"
        }
      ],

      // 预设图标展示
      iconImageList: [],

      // 预设背景按钮列表
      bgColorBtnList: [
        {
          bgColor: "#282A36",
          name: "暗岩灰",
          color: "#fff",
        },
        {
          bgColor: "#ffffff",
          name: "白色",
          color: "#000",
        },
        {
          bgColor: "#FFCA28",
          name: "琥珀色",
          color: "#000",
        },
      ],

      // 背景颜色和背景图片
      bgColor: "#282A36", //默认灰色
      bgImage: "",

      // 预设背景图按钮列表
      bgImageBtnList: [
        {
          url: require("./assets/bg/code.png"),
          name: "代码背景",
        },
      ],

      // 判断目前是背景图还是背景颜色
      isColorAndImage: true,

      // 预设背景图 冲击效果 按钮列表
      bgSpikeBtnList: [
        {
          url: require("./assets/spike/black.png"),
          name: "黑色冲击",
        },
        {
          url: require("./assets/spike/white.png"),
          name: "白色冲击",
        },
      ],

      // 冲击图片展示
      bgSpikeImage: "",

      // 冲击图片透明度
      bgSpineOpacity: 0.1,

      // 上传图标
      fileListIcon: [],
    };
  },
  methods: {
    // 切换侧边栏
    onChange(index) {
      // this.$notify({ type: 'success', message: index });
    },

    // 处理预设图标按钮点击
    onIconBtnClick(item, index) {
      // 增删图表
      //1. 判断元素是否已经存在
      let itemIndex = this.iconImageList.findIndex(x => x.name === item.name)
      if (itemIndex >= 0) {
        //2. 如果元素存在则删除
        this.iconImageList.splice(itemIndex, 1)
      } else {
        //3. 如果元素不存在则添加
        this.iconImageList.push(item)
      }

      // 改变按钮颜色和icon
      if (this.iconBtnList[index].type === "info") {
        this.iconBtnList[index].type = "danger"
        this.iconBtnList[index].icon = "minus"
      } else {
        this.iconBtnList[index].type = "info"
        this.iconBtnList[index].icon = "plus"
      }
    },

    // 处理预设背景色按钮点击
    onBgColorBtnClick(item, index) {
      this.isColorAndImage = true
      this.bgColor = item.bgColor
    },

    // 处理预设背景图片按钮点击
    onImageBtnClick(item, index) {
      this.isColorAndImage = false
      this.bgImage = item.url
    },

    // 处理视觉冲击图片按钮点击
    onSpikeBtnClick(item, index) {
      this.bgSpikeImage = item.url
    },

    // 保存图片到本地
    onClickRight() {
      // 将页面指定节点内容转为图片
      html2canvas(this.$refs.imageDom).then(canvas => {
        // 转成图片，生成图片地址
        this.imgUrl = canvas.toDataURL("image/png");
        // 保存到本地
        // 创建隐藏的可下载链接
        const eleLink = document.createElement("a");
        eleLink.href = this.imgUrl; // 转换后的图片地址
        eleLink.download = "pictureName";
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
        this.$notify({type: 'primary', message: "保存图片成功"});
      });
    },

    // 添加空格
    onBigTitleAddSpace(value) {
      let temp = "　" // 这里是空格
      this[value] = temp += this[value]
    },

    // 上传图标
    onAfterReadIcon(file, params) {
      this.iconImageList.push(
          {
            name: '上传文件' + params.index,
            url: file.content,
            type: "info",
            icon: "plus"
          },
      )
    },

    // 删除图标
    onBeforeDeleteIcon(file, params) {
      // console.log(file);
      // console.log(params.index);
      let itemIndex = this.iconImageList.findIndex(x => x.name === ('上传文件' + params.index))
      // 删除展示的
      this.iconImageList.splice(itemIndex, 1)
      // 删除上传的
      this.fileListIcon.splice(params.index, 1)
    },

    // 上传背景
    onAfterReadBg(file, params) {
      this.isColorAndImage = false
      // base64 可以直接 在 background 使用 , 学到了 ~
      this.bgImage = file.content
    },
  },
  computed: {
    // 更改画板为背景颜色或者背景图
    bgComputed() {
      let temp
      if (this.isColorAndImage) {
        temp = {background: this.bgColor}
      } else {
        temp = {background: `url(${this.bgImage})`}
      }
      return temp
    },

    // 修改冲击图 style
    styleVar() {
      return {
        '--bgSpineOpacityStyle': this.bgSpineOpacity
      }
    },

    // 添加冲击图
    spikeComputed() {
      return {background: `url(${this.bgSpikeImage})`}
    },

    // 修改字体高度 style
    bigTitleStyle() {
      return {
        '--fontHeightStyle1': this.bigSliderValue1 + 5 + 'px',
        '--fontHeightStyle2': this.bigSliderValue2 + 5 + 'px',
      }
    }
  },
}
</script>

<style lang="scss">

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  padding-left: 0;
  box-sizing: border-box;
  background: #F7F7FB;

  .container-left {
    padding-right: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;

    .left-save {
      padding-left: 10px;
      margin-bottom: 20px;
      flex: 1;
    }

    .left-bottom {
      display: flex;
      gap: 10px;
      height: 100%;

      .left-bottom-content {
        overflow-y: scroll;
        height: 80%;

        & > div {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
        }

        .content-1 {
        }

        .content-2 {
          .bigTitle {
            display: flex;
            align-items: center;
            gap: 10px;
          }
        }

        .content-3 {
          .bgImageBtnList {
            display: flex;
            gap: 10px;
            color: rgba(0, 0, 0, 0.7);
            text-align: center;
          }
        }

        // 修改滑块
        .custom-button {
          width: 26px;
          color: #fff;
          font-size: 10px;
          line-height: 18px;
          text-align: center;
          background-color: #1989FA;
          border-radius: 100px;
        }
      }
    }

    // 修改分割线
    .divider {
      display: block;
      width: 100%;
    }
  }

  .container-right {
    min-width: 1000px;
    min-height: 700px;
    border: 1px solid #1989fa;
    box-sizing: border-box;
    padding: 80px 40px;
    position: relative;
    background-size: contain !important;

    .container-spike {
      background-size: 100% 100% !important;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      opacity: var(--bgSpineOpacityStyle);
      z-index: 2;
    }

    .icon-list {
      display: flex;
      gap: 10px;
    }

    .small-title {
      font-size: 26px;
      color: #fff;
      font-weight: 100;
      font-family: Alibaba-PuHuiTi-Light, serif;

      .small-title1 {
        margin-top: 20px;
      }
    }

    .big-title {
      color: #fff;
      font-family: Alibaba-PuHuiTi-Heavy, Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, serif;

      .big-title1 {
        margin: 0;
        line-height: var(--fontHeightStyle1);
      }

      .big-title2 {
        margin: 0;
        text-indent: 1em;
        line-height: var(--fontHeightStyle2);
      }
    }

  }
}

/*处理 Vant 样式*/
.van-sidebar {
  min-width: 120px;
}

.van-sidebar-item--select, .van-sidebar-item--select:active {
  background-color: #1989fa;
  color: #fff;
}

.van-sidebar-item--select::before {
  display: none;
}

.van-uploader__upload {
  border: 1px solid #1989FA;
}
</style>
